<!--  -->
<template>
  <div class="container">
    <div class="main">
      <div class="title">
        <span>全局音频</span>
        <el-tooltip
          effect="dark"
          content="全局音频关闭"
          placement="right-start"
        >
          <i class="iconfont icon-tishifill"></i>
        </el-tooltip>
        <div class="slider">
          <b-progress
            @dragging="dragging"
            :percent.sync="percent"
            :stroke-width="2"
            :track-color="['#00000055', 'var(--joker)']"
            show-thumb
            allow-click
            allow-drag
            is-active
          />
        </div>
      </div>
      <div class="slider">
        <b-switch
          class="item"
          v-model="GlobalAudio"
          size="small"
          :width="46"
          true-color="var(--success)"
          false-color="tomato"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </b-switch>
      </div>
      <div class="title">
        <span>进场播报</span>
        <el-tooltip
          effect="dark"
          content="进场播报(欢迎**进入直播间)"
          placement="right-start"
        >
          <i class="iconfont icon-tishifill"></i>
        </el-tooltip>
      </div>
      <div class="control">
        <b-switch
          class="item"
          v-model="intoAudio"
          size="small"
          :width="46"
          true-color="var(--success)"
          false-color="tomato"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </b-switch>
      </div>
      <div class="title">
        <span>弹幕播报</span>
        <el-tooltip effect="dark" content="弹幕音频" placement="right-start">
          <i class="iconfont icon-tishifill"></i>
        </el-tooltip>
      </div>
      <div class="control">
        <b-switch
          class="item"
          v-model="BarrageAudio"
          size="small"
          :width="46"
          true-color="var(--success)"
          false-color="tomato"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </b-switch>
      </div>
      <div class="title">
        <span>礼物播报</span>
        <el-tooltip
          effect="dark"
          content="礼物音频(谢谢**送来的***)"
          placement="right-start"
        >
          <i class="iconfont icon-tishifill"></i>
        </el-tooltip>
      </div>
      <div class="control">
        <b-switch
          class="item"
          v-model="giftAudio"
          size="small"
          :width="46"
          true-color="var(--success)"
          false-color="tomato"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </b-switch>
      </div>
      <div class="title">
        <span>音乐音频</span>
        <el-tooltip
          effect="dark"
          content="关闭直播间点歌音乐"
          placement="right-start"
        >
          <i class="iconfont icon-tishifill"></i>
        </el-tooltip>
      </div>
      <div class="control">
        <b-switch
          class="item"
          v-model="songAudio"
          size="small"
          :width="46"
          true-color="var(--success)"
          false-color="tomato"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </b-switch>
      </div>
    </div>
  </div>
</template>
<script>
import store from "../../../store/index";
export default {
  components: {},
  data() {
    return {
      // 全局
      percent:(+store.state.GlobalAudioValue) * 100,
      GlobalAudio: store.state.GlobalAudio,
      // 进场
      intoAudio: store.state.intoAudio,
      // 弹幕
      BarrageAudio: store.state.BarrageAudio,
      // 礼物
      giftAudio: store.state.giftAudio,
      // 音乐
      songAudio: store.state.songAudio,
    };
  },
  watch: {
    GlobalAudio(n) {
      store.commit("changeGlobalAudio", n);
      window.localStorage.setItem("GlobalAudio", n);
    },
    intoAudio(n) {
      store.commit("changeintoAudio", n);
      window.localStorage.setItem("intoAudio", n);
    },
    BarrageAudio(n) {
      store.commit("changeBarrageAudio", n);
      window.localStorage.setItem("BarrageAudio", n);
    },
    giftAudio(n) {
      store.commit("changegiftAudio", n);
      window.localStorage.setItem("giftAudio", n);
    },
    songAudio(n) {
      store.commit("changesongAudio", n);
      window.localStorage.setItem("songAudio", n);
    },
  },
  methods: {
    dragging(e){
      let AudioValue = (Math.floor(e)/100).toFixed(1)
      store.commit('changeGlobalAudioValue',AudioValue)
      window.localStorage.setItem("GlobalAudioValue", AudioValue);
    }
  },
};
</script>
<style  scoped>
.container {
  padding-top: 5px;
  padding-left: 30px;
  text-align: left;
  overflow: hidden;
}
.main {
  height: 205px;
  overflow: scroll;
}
.main::-webkit-scrollbar {
  display: none;
}
.title {
  margin: 20px 0 10px 0;
}
.title i {
  color: rgba(29, 141, 185, 0.993);
  font-size: 13px;
  cursor: pointer;
}
.slider {
  width: 180px;
}
</style>